<template>
  <tk-container>
    <tkui-header center>登录</tkui-header>
    <div class="body">
      <my-input v-model = 'phonenumber' type = 'text' label = '账号' placeholder = "请输入手机号"></my-input>
      <my-input v-model = 'password' type = 'password' label = '密码' placeholder = "请输入密码"></my-input>
      <tk-flex middle between class = 'setting'>
        <router-link class = 'primary' to = '/register'>新用户注册</router-link>
        <router-link class = 'primary' to = '/retrieval'>忘记密码</router-link>
      </tk-flex>
      <tkui-button class="block raised btn" :class = '[verify ? "primary" : "disable"]' @click.native = 'login'>登录</tkui-button>
    </div>
  </tk-container>
</template>
<script>
  import myInput from 'components/input'
  export default {
    data () {
      return {
        phonenumber: '',
        password: ''
      }
    },
    computed: {
      verify () {
        return this.phonenumber && this.password
      }
    },
    methods: {
      login () {
        if (!this.verify) return false
        this.$tkAjax.request({
          url: '/1.1/login',
          methods: 'get',
          params: {
            'mobilePhoneNumber': this.phonenumber,
            'password': this.password
          }
        }).then(res => {
          console.log(res)
        }).catch(error => {
          console.log(error)
        })
      }
    },
    components: {
      myInput
    }
  }
</script>
<style lang = 'scss' scoped>
  @import '../assets/scss/main';
  .body {
    margin-top: 20px;
    padding: 0 $gutter;
    .setting {
      height: 60px;
    }
    .btn{
      margin-top:30px;
    }
  }
</style>
